<template>
    <div class="goodsinfo">

        <!-- 小球添加区域 -->
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterenter">
          <div class="ball" v-show="ballflag" ref="ball">

        </div>
        </transition>
      
        <!-- 商品了轮播图区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-swipe :auto="2000">
                             <mt-swipe-item v-for="item in goodslunbo" :key="item.a">
                            <img :src="item.thumbnail" alt="">
                        </mt-swipe-item>
                        </mt-swipe>
					</div>
				</div>
		</div>
        <!-- 商品购买 -->
        <div class="buy">
            <div class="mui-card">
				<div class="mui-card-header">商品名称标题</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                    <p class="price">
					市场价：<del>$2399</del>&nbsp;&nbsp;销售价：<span class="now_price">${{somethings.comment}}</span>
                    </p>
                    <p>购买数量: <input type="button" value="-" @click="minus"><input type="text" v-model="$store.state.count" class="num"><input type="button" value="+" @click="add"></p>
                    <!--  @getcount="getSelectedCount" -->
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                         <mt-button type="danger" size="small" class="danger" @click="addtocar">加入购物车</mt-button>

                         <!-- //父子嵌套，子组件向父组件传值 -->
                    </p>
					</div>
				</div>
            </div>
        </div>
        <!-- 商品参数 -->
        <div class="info">
            <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{}}</p>
                        <p>库存情况：60件</p>
                        <p>上架时间：</p>
					</div>
				</div>
            <div class="mui-card-footer">
                <router-link to="/home/goodsecs">
                <mt-button type="primary" size="large" plain >primary</mt-button></router-link>
                <router-link to="/home/goodscomment">
                <mt-button type="danger" size="large" plain >primary</mt-button></router-link>
            </div>
            </div>
        </div>
    </div>
</template>
<script>
// import numbox from '../subcomponents/goodsinfo_numbox.vue'

export default {
    data() {
        return {
            //id:this.$route.params.id,
            //goodsinfo:(),
            goodslunbo:[],
            somethings:{},
            ballflag:false,
        }
        
    },
    created() {
        this.getGoodslunbo()
         console.log(this.id);
    },
    methods: {
       getGoodslunbo(){
            this.$http.get('satinGodApi?type=5&page=1').then(result=>{
                console.log(result.body)
                if(result.body.code===200){
                    this.goodslunbo=result.body.data;
                    this.somethings=result.body.data[1];
                    // console.log(result.body); 
                }
            })
        },
        // goDesc(comment){
        //     this.$router.pushu({name:'goodsecs',params:{comment:'comment'}})
        // },
        // goComment(cooment){
        //      this.$router.pushu({name:'goodscomment',params:{comment:'comment'}})
        // }
        addtocar(){
            this.ballflag=!this.ballflag;
        },
        beforeEnter(el){
            el.style.transform="translate(0,0)";
        },
        enter(el,done){
            el.offsetWidth;

            //小球动画优化思路：
            //动态获取：差值获取
            //getObject.getBoundingClientRect()
            const ballPosition=this.$refs.ball.getBoundingClientRect();
            //获取徽标在页面中的位置
            const badgePosition=document.getElementById('badge').getBoundingClientRect();

            const xDist=badgePosition.left-ballPosition.left;
            const yDist=badgePosition.top-ballPosition.top;

            el.style.transform=`translate(${xDist}px,${yDist}px)`;
            el.style.transition='all 0.8s cubic-bezier(.75,-0.53,1,.58)';
            done()
        },
        afterenter(el){
            this.ballflag=!this.ballflag;

            var goodsinfo={
                id:this.somethings.up,
                counts:this.$store.state.count,price:this.somethings.comment,
                selected:true};

                this.$store.commit("addtocar",goodsinfo)
                
 
        },
        // getSelectedCount(count){
        //     this.selectedCount=count;

        // }
        
        
        
        minus(){
             this.$store.commit('minus');
        },
        add(){
            this.$store.commit('increment');
        }
        
    },

    //生成方法
    components:{
    //    numbox
    },
    //数据绑定
    // props:["max"],
    // watch: {
    //     //属性监听
    //     'max':function(newVal,oldVal){
    //         mui(".mui-numbox").numbox().setOption("max",newVal);
    //     }
    // },
}

</script>
<style lang="less">
.goodsinfo{
    overflow: hidden;
    .mui-card-content-inner{
        margin: 0;
        padding: 0;
    .mint-swipe{
        height: 200px;
        img{
            width: 100%;
            height: 100%;
            }
        }
    }
    .now_price{
        color: red;
    }
    .buy{
        p{
            padding:4px; 
            padding-left: 12px;
        }
        .danger{
            margin-left: 15px;
        }
    }
    .info{
        p{
            padding: 4px;
            padding-left: 12px;;
        }
    }
    .mui-card-footer{
        display: block;
        button{
            margin: 15px 0;
        }
    }
    .ball{
        width: 17.5px;
        height: 17.5px;
        border-radius: 50%;
        background: red;
        position: absolute;
        z-index: 999;
        top: 345px;
        left: 130px;
        // transform: translate(106px,274px);
    }
    .num{
        width: 30px;
        padding: 0;
        text-align: center;
    }
}
</style>
